<template>
  <div class="wrap">
    <div class="area">
      <img :src="imgUrl" alt="" />
    </div>
    <button @click="getList">获取</button>

    <el-upload
      v-model:file-list="fileList"
      class="upload-demo"
      action="/manage/upload"
      multiple
      @success="success"
    >
      <el-button type="primary">Click to upload</el-button>
    </el-upload>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from "@vue/runtime-core";
import useCurrentInstance from "@/hooks/useCurrentInstance";
export default defineComponent({
  setup() {
    const { globalProperties } = useCurrentInstance();

    let imgUrl = ref("");

    let content = ref("");
    let params = {
      pageSize: 10,
      pageNum: 1,
    };

    const success = function ({ data }) {
      imgUrl.value = data;
    };

    let fileList;

    const getList = async function () {
      let { data } = await globalProperties?.$api["getList"](params);
      content.value = data.data;
    };

    return {
      content,
      imgUrl,
      fileList,
      getList,
      success,
    };
  },
});
</script>

<style lang="less" scoped>
.area {
  width: 500px;
  height: 200px;
  padding-top: 40px;

  img {
    width: 300px;
  }
}
</style>